import { React, useState, useEffect } from "react";
import { Button, Layout, Table, Modal, Input } from "antd";
import "./ApiKey.css";
import { PlusOutlined } from "@ant-design/icons";
import { ApiService } from "../common/ApiService";
const item = [
    {
        key: 1,
        name: "Frankfurt FlashBlock Endpoint",
        status: "Active",
        network: "Solana Mainne",
    },
    {
        key: 12,
        name: "Frankfurt FlashBlock Endpoint",
        status: "Active",
        network: "Solana Mainne",
    },
];
const { Header, Footer, Sider, Content } = Layout;
const { Column } = Table;
const headerStyle = {
    color: "#fff",
    height: 114,
    paddingInline: 61,
    lineHeight: "114px",
    backgroundColor: "#141E20",
};
const contentStyle = {
    textAlign: "center",
    color: "#fff",
    backgroundColor: "#141E20",
};
const siderStyle = {
    color: "#fff",
    backgroundColor: "#23363A",
};
const layoutStyle = {
    width: "100%",
    maxWidth: "100%",
    minHeight: "100vh",
};
const ApiKey = () => {
    const [visible, setVisible] = useState(false);
    const [apiKeyData, setApiKeyData] = useState([]);
    const fetchData = async () => {
        try {
            var response = await ApiService.queryKey();
            if (response.code === 0) {
                apiKeyData.uid = response.data.uid;
                apiKeyData.api_key = response.data.api_key;
                const created_at = new Date(response.data.created_at * 1000);
                apiKeyData.created_at = created_at.toLocaleDateString();
                const updated_at = new Date(response.data.updated_at * 1000);
                console.log(updated_at.toLocaleDateString());
                apiKeyData.updated_at = updated_at.toLocaleDateString();
                const keyList = [];
                keyList.push(apiKeyData);
                setApiKeyData(keyList);
            }
        } catch (err) {
            console.log(err);
            //setError(err.message);
        }
    };
    useEffect(() => {
        fetchData();
    }, []);
    const createApiKey = async () => {
        try {
            var response = await ApiService.newKey();
            if (response.code === 0) {
                fetchData();
                setVisible(false);
            } else {
                alert(response.message);
            }
        } catch (err) {
            console.log(err);
            //setError(err.message);
        }
    };
    const deleteApiKey = async () => {
        try {
            var response = await ApiService.delKey();
            if (response.code === 0) {
                setApiKeyData([]);
            } else {
                alert(response.message);
            }
        } catch (err) {
            console.log(err);
            //setError(err.message);
        }
    };
    return (
        <>
            <Layout style={layoutStyle}>
                <Sider width="403px" style={siderStyle}>
                    <div className="menuList">
                        <img
                            src="../public/images/LOGO1.svg"
                            width="238px"
                            height="32px"
                            onClick={() => {
                                location.href = "/";
                            }}
                        />
                        <div
                            className="checkMenu"
                            onClick={() => {
                                location.href = "/MemberInfo";
                            }}
                        >
                            <img src="../../public/images/arrowhead3.svg" />
                            Dashboard
                        </div>
                        <div className="checkMenu active">
                            <img src="../../public/images/API_H1.svg" />
                            Endpoint & API Key
                        </div>
                        <div
                            className="checkMenu"
                            onClick={() => {
                                location.href = "/Setting";
                            }}
                        >
                            <img src="../../public/images/setting1.svg" />
                            Setting
                        </div>
                    </div>
                </Sider>
                <Layout>
                    <Header style={headerStyle}>
                        <div className="memberHeader">
                            <div className="name">Endpoint & API Key</div>
                            <div className="info">
                                Balance: <span>$0.00</span> USDC
                                <img src="../../public/images/memberRobot.svg" />
                                <div className="robotName">U</div>
                            </div>
                        </div>
                    </Header>
                    <Content style={contentStyle}>
                        <div className="apiMain">
                            <div className="title">Endpoints</div>
                            <div className="des">
                                Endpoints are used to interact with FlashBlock's services. Each
                                endpoint is optimized to deliver fast, reliable responses.
                            </div>
                            <div className="apiPanel" height="248px">
                                <Table
                                    pagination={false}
                                    dataSource={item}
                                    style={{
                                        backgroundColor: "#23363A",
                                    }}
                                >
                                    <Column
                                        title="Name"
                                        width={500}
                                        render={(_, record) => (
                                            <>
                                                <img
                                                    src="../../public/images/Solana1.svg"
                                                    width="16px"
                                                    style={{
                                                        marginRight: "5px",
                                                        position: "relative",
                                                        top: -2,
                                                    }}
                                                />
                                                {record.name}
                                            </>
                                        )}
                                    />
                                    <Column
                                        title="Status"
                                        dataIndex="status"
                                        key="status"
                                        width={300}
                                    />
                                    <Column
                                        title="Network"
                                        dataIndex="network"
                                        key="network"
                                        width={300}
                                    />
                                    <Column
                                        width={70}
                                        title=""
                                        key="action"
                                        render={(_, record) => (
                                            <Button
                                                style={{
                                                    borderRadius: 40,
                                                    border: "#31F045 solid 1px",
                                                    backgroundColor: "#23363A",
                                                    color: "#ffffff",
                                                    fontFamily: 'Inter'
                                                }}
                                            >
                                                Manage Endpoint <PlusOutlined />
                                            </Button>
                                        )}
                                    />
                                </Table>
                            </div>
                            <div
                                className="title"
                                style={{
                                    marginTop: 60,
                                }}
                            >
                                APIKeys
                            </div>
                            <div className="des">
                                <div className="txt">
                                    APl keys are used to securely authenticate requests and access
                                    FlashBlock's transaction endpoints.
                                    <br />
                                    Keep your APl key private to Create API Keyensure account
                                    security.
                                </div>
                                <Button
                                    onClick={() => setVisible(true)}
                                    style={{
                                        backgroundColor: "rgb(35, 54, 58)",
                                        borderRadius: 40,
                                        height: 46,
                                        width: 223,
                                        fontSize: 20,
                                        fontWeight: 500,
                                        border: "rgb(49, 240, 69) solid 1px",
                                        fontFamily: 'Inter',
                                        color: '#fff'
                                    }}
                                >
                                    Create API Key <PlusOutlined />
                                </Button>
                            </div>
                            <div className="apiPanel">
                                <Table
                                    pagination={false}
                                    dataSource={apiKeyData}
                                    locale={{
                                        emptyText: (
                                            <div style={{ color: "#ffffff", fontSize: 20 }}>
                                                <p>No API keys found</p>
                                            </div>
                                        ),
                                    }}
                                >
                                    <Column title="Name" dataIndex="uid" key="uid" width={500} />
                                    <Column
                                        title="Key ID"
                                        dataIndex="api_key"
                                        key="api_key"
                                        width={250}
                                    />
                                    <Column
                                        title="Created"
                                        dataIndex="created_at"
                                        key="created_at"
                                        width={250}
                                    />
                                    <Column
                                        title="Last updated"
                                        dataIndex="updated_at"
                                        key="updated_at"
                                        width={250}
                                    />
                                    <Column
                                        title="Action"
                                        dataIndex=""
                                        key="x"
                                        width={70}
                                        render={(_, record) => (
                                            <Button
                                                style={{
                                                    borderRadius: 40,
                                                    border: "#31F045 solid 1px",
                                                    backgroundColor: "#23363A",
                                                    color: "#ffffff",
                                                }}
                                                onClick={deleteApiKey}
                                            >
                                                Delete
                                            </Button>
                                        )}
                                    />
                                </Table>
                            </div>
                        </div>
                        <Modal
                            title="Create API Key"
                            open={visible}
                            onOk={() => setVisible(false)}
                            onCancel={() => setVisible(false)}
                            width={879}
                            className="addKey"
                            footer={null}
                        >
                            <div
                                style={{ fontSize: 24, fontWeight: 500, fontFamily: "Inter" }}
                            >
                                API Key name
                            </div>
                            <div style={{ marginTop: 19 }}>
                                <Input className="addKeyInput"></Input>
                            </div>
                            <div
                                style={{
                                    fontSize: 16,
                                    fontWeight: 500,
                                    fontFamily: "Inter",
                                    height: 40,
                                    lineHeight: "40px",
                                }}
                            >
                                <img src="../../public/images/exclamation1.svg" />
                                &nbsp; Generating this API will give access to all existing and
                                future endpoints for the API key.
                            </div>
                            <div
                                style={{
                                    display: "flex",
                                    justifyContent: "space-between",
                                    marginTop: 40,
                                    padding: "0 60px",
                                }}
                            >
                                <Button
                                    key="back"
                                    onClick={() => setVisible(false)}
                                    style={{
                                        width: 230,
                                        height: 60,
                                        backgroundColor: "#23363A",
                                        border: "#31F045 solid 1px",
                                        borderRadius: 40,
                                        fontSize: 26,
                                        color: "#ffffff",
                                        fontWeight: 500,
                                    }}
                                >
                                    Cancel
                                </Button>
                                <Button
                                    key="submit"
                                    type="primary"
                                    onClick={() => createApiKey(false)}
                                    style={{
                                        width: 230,
                                        height: 60,
                                        backgroundColor: "#31F045",
                                        borderRadius: 40,
                                        fontSize: 26,
                                        color: "#000000",
                                        fontWeight: 500,
                                    }}
                                >
                                    Generate
                                </Button>
                            </div>
                            {/* 可以在这里放置复杂内容或组件 */}
                        </Modal>
                    </Content>
                </Layout>
            </Layout>
        </>
    );
};
export default ApiKey;
